<template>
  <div class="annotation-container" ref="annotationContainerRef">
    <svg id="annotation-lines" ref="annotationLines"></svg>

    <!-- 文章内容 - 使用插槽 -->
    <main id="main-content" ref="mainContent">
      <p color = "#888"> 这是一段测试文本</p>
      <el-button v-if="showAnnotationBtn" class="annotation-btn" @click="hideAnnotationBtn"
        :style="{ top: btnTop + 'px', left: btnLeft + 'px' }" type="primary">
        添加批注
      </el-button>
    </main>


    <!-- 批注面板 -->
    <div class="annotation-sidebar" v-if="annotations.length > 0">
      <div class="annotation-list" ref="annotationListRef">
        <div v-for="annotation in annotations" :key="annotation.id" class="annotation-box"
          :data-annotation-id="annotation.id" :style="{ top: annotation.position.top + 'px' }"
          @dblclick="editAnnotation(annotation)">
          <div class="annotation-header">
            <img :src="annotation.avatar" alt="Avatar" class="annotation-avatar" />
            <span class="annotation-username">{{ annotation.username }}</span>
            <span class="annotation-time">{{ annotation.time }}</span>
            <el-dropdown trigger="click" class="annotation-actions">
              <span class="el-dropdown-link">
                <el-icon class="el-icon--right">
                  <MoreFilled />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="deleteAnnotation(annotation)">删除</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="annotation-content">
            <div v-if="annotation.editing" class="annotation-edit-container">
              <el-input v-model="annotation.text" class="annotation-input" type="textarea"
                @keyup.enter="confirmEdit(annotation)" @blur="confirmEdit(annotation)" />
            </div>
            <p v-else class="annotation-text">
              {{ annotation.text }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import {
ElButton, ElInput, ElDropdown, ElDropdownMenu, ElDropdownItem, ElIcon
} from 'element-plus';
import { MoreFilled } from '@element-plus/icons-vue';


// 批注按钮状态和位置
const showAnnotationBtn = ref(false);
const btnTop = ref(0);
const btnLeft = ref(0);
const mainContent = ref(null);
const annotations = ref([
// 预设批注数据...
]);

const annotationListRef = ref(null);
const annotationLines = ref(null);
const annotationContainerRef = ref(null);

// 编辑批注
function editAnnotation(annotation) {
annotation.editing = true;
}

// 确认编辑
function confirmEdit(annotation) {
annotation.editing = false;
nextTick(() => {
  drawAllAnnotationLines();
});
}

// 删除批注
function deleteAnnotation(annotation) {
const index = annotations.value.findIndex(a => a.id === annotation.id);
if (index !== -1) {
  // 移除对应的.pizhu span标签
  const highlightedSpan = mainContent.value.querySelector(`span.pizhu[data-annotation-id="${annotation.id}"]`);
  if (highlightedSpan) {
    const parent = highlightedSpan.parentNode;
    parent.replaceChild(document.createTextNode(highlightedSpan.textContent), highlightedSpan);
  }

  annotations.value.splice(index, 1);
  nextTick(() => {
    drawAllAnnotationLines(); // 重新绘制所有连线
  });
}
}

// 处理文本选择事件
function handleSelectionChange() {
const selection = window.getSelection();
if (selection.rangeCount > 0 && !selection.isCollapsed) {
  const range = selection.getRangeAt(0);
  const contentRect = mainContent.value.getBoundingClientRect();

  const isSelectionInMainContent = mainContent.value.contains(range.commonAncestorContainer);

  if (isSelectionInMainContent) {
    const rect = range.getBoundingClientRect();
    btnTop.value = rect.bottom - contentRect.top;
    btnLeft.value = rect.left - contentRect.left;
    showAnnotationBtn.value = true;
  } else {
    showAnnotationBtn.value = false;
  }
}
else {
  showAnnotationBtn.value = false;
}
}

// 隐藏批注按钮（并添加批注）
function hideAnnotationBtn() {
if (window.getSelection().toString().trim()) {
  const selectedText = window.getSelection().toString().trim();
  const selection = window.getSelection();
  const range = selection.getRangeAt(0);

  const id = Date.now();

  // 创建span标签用于高亮和关联
  const span = document.createElement('span');
  span.textContent = selectedText;
  span.className = 'pizhu'; // 添加高亮样式
  span.setAttribute('data-annotation-id', id);

  try {
    range.deleteContents();
    range.insertNode(span);
  } catch (e) {
    console.warn('Error replacing selected text with span:', e);
    // Fallback for multi-line or complex selections
    const clonedContents = range.cloneContents();
    const tempDiv = document.createElement('div');
    tempDiv.appendChild(clonedContents);
    const originalHtml = tempDiv.innerHTML;

    span.innerHTML = originalHtml; // Preserve original HTML structure
    range.deleteContents();
    range.insertNode(span);
  }

  const rect = span.getBoundingClientRect();
  const annotationTop = (rect.top + annotationContainerRef.value.scrollTop) - annotationContainerRef.value.getBoundingClientRect().top;

  annotations.value.push({
    id: id,
    text: selectedText,
    editing: true, // 初始为编辑状态
    position: {
      top: annotationTop,
      left: 0,
      width: '100%',
      height: 'auto'
    },
    time: new Date().toLocaleTimeString(),
    username: '雷越',
    avatar: 'https://cube.elemecdn.com/0/88/03b0dff35048270dfda05a3dff99fpng.png'
  });

  nextTick(() => {
    const newAnnotation = annotations.value.find(anno => anno.id === id);
    if (newAnnotation) {
      editAnnotation(newAnnotation); // 进入编辑模式
    }
    drawAllAnnotationLines();
  });
}
showAnnotationBtn.value = false;
window.getSelection().removeAllRanges();
}

// 画所有批注的连线
function drawAllAnnotationLines() {
const svg = annotationLines.value;
if (!svg) {
  console.error('SVG element not found for drawing lines.');
  return;
}

if (annotationContainerRef.value) {
  svg.style.height = `${annotationContainerRef.value.scrollHeight}px`;
  svg.style.width = `${annotationContainerRef.value.scrollWidth}px`;
}

svg.innerHTML = ''; // 清空之前的连线
const containerRect = annotationContainerRef.value.getBoundingClientRect();
const containerScrollTop = annotationContainerRef.value.scrollTop;
const containerScrollLeft = annotationRect.value.scrollLeft;

annotations.value.forEach(annotation => {
  const span = mainContent.value.querySelector(`span.pizhu[data-annotation-id='${annotation.id}']`);
  const box = annotationListRef.value.querySelector(`[data-annotation-id='${annotation.id}']`);

  if (span && box) {
    const spanRect = span.getBoundingClientRect();
    const boxRect = box.getBoundingClientRect();

    // 计算main-content的右边缘（相对于视口）
    const mainContentRightEdge_raw = mainContent.value.getBoundingClientRect().right;

    // 1. 起点：高亮文本下方中心
    const startX_raw = spanRect.left + spanRect.width / 2;
    const startY_raw = spanRect.bottom;

    // 2. 第一个折点：距离main-content右边缘15px，Y与起点Y相同
    const bendX_raw = mainContentRightEdge_raw - 15;
    const bendY_raw = startY_raw;

    // 3. 第二个折点：X与第一个折点X相同，Y与批注卡片中心Y相同
    const bend2X_raw = bendX_raw;
    const endY_raw = boxRect.top + boxRect.height / 2;

    // 4. 终点：批注卡片左侧中心
    const endX_raw = boxRect.left;

    // 转换为相对于 SVG 容器（滚动区域）的坐标
    const startX = (startX_raw - containerRect.left) + containerScrollLeft;
    const startY = (startY_raw - containerRect.top) + containerScrollTop;
    const bendX = (bendX_raw - containerRect.left) + containerScrollLeft;
    const bendY = (bendY_raw - containerRect.top) + containerScrollTop;
    const bend2X = (bend2X_raw - containerRect.left) + containerScrollLeft;
    const bend2Y = (endY_raw - containerRect.top) + containerScrollTop;
    const endX = (endX_raw - containerRect.left) + containerScrollLeft;
    const endY = (endY_raw - containerRect.top) + containerScrollTop;

    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    path.setAttribute('d', `M${startX},${startY} L${bendX},${bendY} L${bend2X},${bend2Y} L${endX},${endY}`);
    path.setAttribute('stroke', '#e15b56');
    path.setAttribute('stroke-width', '1.5');
    path.setAttribute('stroke-dasharray', '5,5');
    path.setAttribute('fill', 'none');
    svg.appendChild(path);
  } else {
    console.warn(`Could not find span or box for annotation ID: ${annotation.id}`);
  }
});
}

// 生命周期钩子
onMounted(() => {
document.addEventListener('selectionchange', handleSelectionChange);
if (annotationContainerRef.value) {
  annotationContainerRef.value.addEventListener('scroll', drawAllAnnotationLines);
}
window.addEventListener('resize', drawAllAnnotationLines);

nextTick(() => {
  if (mainContent.value) {
    const mainContentDom = mainContent.value;
    const containerRect = annotationContainerRef.value.getBoundingClientRect();
    const containerScrollTop = annotationContainerRef.value.scrollTop;

    annotations.value.forEach(annotation => {
      // 检查这个批注的文本是否已经高亮
      if (mainContentDom.querySelector(`span.pizhu[data-annotation-id="${annotation.id}"]`)) {
        const existingSpan = mainContentDom.querySelector(`span.pizhu[data-annotation-id="${annotation.id}"]`);
        const rect = existingSpan.getBoundingClientRect();
        annotation.position.top = (rect.top + containerScrollTop) - containerRect.top;
        return;
      }

      // 查找并高亮文本
      const walk = document.createTreeWalker(
        mainContentDom,
        NodeFilter.SHOW_TEXT,
        null,
        false
      );
      let node;
      let highlighted = false;
      while ((node = walk.nextNode()) && !highlighted) {
        const textContent = node.nodeValue;
        const startIndex = textContent.indexOf(annotation.text);
        if (startIndex !== -1) {
          const range = document.createRange();
          range.setStart(node, startIndex);
          range.setEnd(node, startIndex + annotation.text.length);

          const span = document.createElement('span');
          span.textContent = annotation.text;
          span.className = 'pizhu';
          span.setAttribute('data-annotation-id', annotation.id);

          try {
            range.surroundContents(span);
            highlighted = true;
            const rect = span.getBoundingClientRect();
            annotation.position.top = (rect.top + containerScrollTop) - containerRect.top;
          } catch (e) {
            console.warn(`Could not surround contents for annotation ID ${annotation.id}:`, e);
            // 尝试更安全的插入方法，可能导致部分高亮不准确，但避免报错
            const clonedContents = range.cloneContents();
            span.appendChild(clonedContents);
            range.deleteContents();
            range.insertNode(span);
            highlighted = true; // 标记为已处理，即使不完美
            const rect = span.getBoundingClientRect();
            annotation.position.top = (rect.top + containerScrollTop) - containerRect.top;
          }
        }
      }
    });
    setTimeout(() => {
      drawAllAnnotationLines();
    }, 100);
  }
});
});

onUnmounted(() => {
document.removeEventListener('selectionchange', handleSelectionChange);
if (annotationContainerRef.value) {
  annotationContainerRef.value.removeEventListener('scroll', drawAllAnnotationLines);
}
window.removeEventListener('resize', drawAllAnnotationLines);
});

</script>


<style lang="scss">
.annotation-container {
display: flex;
min-height: 100vh;
overflow: auto;
position: relative;
}

#annotation-lines {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none; // 允许点击穿透
z-index: 999;
color: #e15b56;
}

#main-content {
flex: 1;
padding: 20px;
min-height: 100vh;
position: relative;
}

.annotation-sidebar {
width: 300px;
background: transparent;
border-left: 1px solid #241d42;
padding: 20px;
min-height: 100vh;
}

.annotation-btn {
position: absolute;
z-index: 200;
margin-top: 5px;
white-space: nowrap;
}

.annotation-box {
width: 260px;
min-height: 60px;
border: 1px solid #e15b56; /* 红色边框 */
border-radius: 4px;
margin-bottom: 15px;
padding: 10px;
position: absolute; // 相对定位，方便js调整top
background-color: #fff;
box-sizing: border-box;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.annotation-header {
display: flex;
align-items: center;
margin-bottom: 8px;
position: relative;
}

.annotation-avatar {
width: 24px;
height: 24px;
border-radius: 50%;
margin-right: 8px;
}

.annotation-username {
font-weight: bold;
color: #e15b56; /* 红色用户名 */
margin-right: 10px;
font-size: 14px;
}

.annotation-time {
font-size: 12px;
color: #909399; /* 灰色时间 */
flex-grow: 1;
}

.annotation-content {
background-color: #f7f7f7; /* 灰色背景 */
padding: 8px;
border-radius: 4px;
}

.annotation-text {
user-select: text; /* 确保批注内容可以被选中 */
// ... 其他样式
}

.pizhu {
background-color: #e15b56; /* 高亮文本的背景色 */
}

// 对于Element Plus组件的深度选择器
:deep(.el-textarea__inner) {
box-shadow: none !important;
resize: none;
padding: 0;
width: 100%;
box-sizing: border-box;
min-width: 0;
white-space: normal;
word-wrap: break-word;
background-color: #f7f7f7; // 继承内容区背景
color: #303133;
font-size: 14px;
line-height: 1.5;
border: none;
}

:deep(.highlighted-text) {
background-color: #e15b56; // 高亮文本颜色
}

</style>
